import React from 'react';

import { Divider, Toolbar } from '../../component';
import { headingDropdownData, insertDropdownData, fontFamilyDropdownData, fontSizeDropdownData } from '../../share';

import { MarkDropdown, BlockDropdown } from './Dropdown';
import { TodoButton, MarkButton, BlockButton, HistoryButton, LinkButton, IndentButton } from './Button';

export const Menu = () => {
  return (
    <Toolbar>
      <HistoryButton type="redo" />
      <HistoryButton type="undo" />
      {/* <TodoButton format="todo" icon="formatPainter"></TodoButton>
      <TodoButton format="todo" icon="clean"></TodoButton> */}
      <Divider />
      <MarkDropdown format="fontSize" text="字号" dropdownData={fontSizeDropdownData} />
      <MarkDropdown format="fontFamily" text="字体" dropdownData={fontFamilyDropdownData} />
      <BlockDropdown text="标题" dropdownData={headingDropdownData} />
      <Divider />
      <MarkButton format="bold" icon="bold" />
      <MarkButton format="italic" icon="italic" />
      <MarkButton format="underline" icon="underline" />
      <MarkButton format="strike" icon="strike" />
      <MarkButton format="color" icon="color" />
      <MarkButton format="background" icon="background" />
      <LinkButton />
      <Divider />
      <BlockButton format="block-quote" icon="blockQuote" />
      <BlockButton format="bulleted-list" icon="orderedList" />
      <BlockButton format="unordered-list" icon="unorderedList" />
      <BlockButton format="check-list" icon="checkList" />
      <IndentButton type="right" />
      <IndentButton type="left" />
      {/* <TodoButton format="todo" icon="lineSpacing"></TodoButton> */}
      <Divider />
      {/* <MarkButton format="code" icon="code" /> */}
      <BlockDropdown text="插入" dropdownData={insertDropdownData} />
    </Toolbar>
  );
};
